<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link id="title-icon" rel="icon" href="" />
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
  </head>
  <body>
    <noscript>
      <strong>请打开JavaScript功能后再试</strong>
    </noscript>
    <div id="app">
      <style>
        :root {
          --sk-size: 80px;
          --sk-color: rgba(66, 147, 200, 0.3);
        }

        .sk-grid {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: var(--sk-size);
          height: var(--sk-size);
          /* Cube positions
         * 1 2 3
         * 4 5 6
         * 7 8 9
         */
        }

        .sk-grid-cube {
          width: 33.33%;
          height: 33.33%;
          background-color: var(--sk-color);
          float: left;
          animation: sk-grid 1.3s infinite ease-in-out;
        }

        .sk-grid-cube:nth-child(1) {
          animation-delay: 0.2s;
        }

        .sk-grid-cube:nth-child(2) {
          animation-delay: 0.3s;
        }

        .sk-grid-cube:nth-child(3) {
          animation-delay: 0.4s;
        }

        .sk-grid-cube:nth-child(4) {
          animation-delay: 0.1s;
        }

        .sk-grid-cube:nth-child(5) {
          animation-delay: 0.2s;
        }

        .sk-grid-cube:nth-child(6) {
          animation-delay: 0.3s;
        }

        .sk-grid-cube:nth-child(7) {
          animation-delay: 0s;
        }

        .sk-grid-cube:nth-child(8) {
          animation-delay: 0.1s;
        }

        .sk-grid-cube:nth-child(9) {
          animation-delay: 0.2s;
        }

        @keyframes sk-grid {
          0%,
          70%,
          100% {
            transform: scale3D(1, 1, 1);
          }
          35% {
            transform: scale3D(0, 0, 1);
          }
        }
      </style>
      <div class="sk-grid">
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
        <div class="sk-grid-cube"></div>
      </div>
    </div>
    <!-- built files will be auto injected -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
